<template>
  <div class="app-container">
    <el-form size="small" inline>
      <el-form-item label="土地编码/地宗号">
        <el-input v-model="query.landCode" placeholder="请输入土地编码/地宗号" clearable />
      </el-form-item>
      <el-form-item label="所属地区">
        <el-input v-model="query.region" />
      </el-form-item>
      <el-form-item label="经营户代表/企业名称">
        <el-input v-model="query.name" placeholder="请输入经营户代表/企业名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询 </el-button>
        <el-button plain icon="el-icon-refresh" @click="handleReset()"> 重置 </el-button>
        <help></help>
      </el-form-item>
    </el-form>
    <el-table border v-loading="loading" :data="list">
      <el-table-column align="center" label="土地编码/地宗号" prop="landCode" />
      <el-table-column align="center" label="所属地区" prop="organization">
        <template slot-scope="scope">
          <agriculture-region :value.sync="scope.row.organization" type="text" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="经营户代表/企业名称" prop="name" />
      <el-table-column align="center" label="种植物类型" prop="" />
      <el-table-column align="center" label="种植计划数" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-document">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />

    <help-dialog title="种植信息详情" :visible.sync="dialogVisible" @close="close">
      <el-form size="small" label-width="120px">
        <div class="label">土地信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="土地编码/地宗号" prop="landCode">
              <el-input
                v-model="queryParam.landCode"
                placeholder="请输入土地编码/地宗号"
                @input="changeLandCode"
                clearable
                disabled
              />
            </el-form-item>
            <el-form-item label="面积（亩）" prop="area">
              <el-input v-model="queryParam.area" disabled placeholder="请输入面积（亩）" clearable />
            </el-form-item>
            <el-form-item label="坐标（西至）" prop="west">
              <el-input v-model="queryParam.west" disabled placeholder="请输入坐标（西至）" />
            </el-form-item>
            <el-form-item label="坐标（北至）" prop="north">
              <el-input v-model="queryParam.north" disabled placeholder="请输入坐标（北至）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否农田" prop="basicLand">
              <el-select
                v-model="queryParam.basicLand"
                disabled
                placeholder="请选择是否基本农田"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.agriculture_basic_land"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐标（东至）" prop="east">
              <el-input v-model="queryParam.east" disabled placeholder="请输入坐标（东至）" />
            </el-form-item>
            <el-form-item label="坐标（南至）" prop="south">
              <el-input v-model="queryParam.south" disabled placeholder="请输入坐标（南至）" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="label">经营户种植信息</div>
      <el-table border v-loading="loading" :data="manageList">
        <el-table-column align="center" label="土地编码/地宗号" prop="landCode" />
        <el-table-column align="center" label="经营户类型">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.agriculture_manage_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属地区" prop="region" />
        <el-table-column align="center" label="种植物" />
        <el-table-column align="center" label="申报人" prop="createName" />
        <el-table-column align="center" label="提交时间" prop="createTime" />
        <el-table-column align="center" label="种植状态" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-document">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </help-dialog>

    <help-dialog title="经营户种植信息详情" :visible.sync="dialogInfo" @close="closeDialog">
      <el-form size="small" label-width="130px">
        <div class="label">经营户信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="queryParam.name" placeholder="请输入姓名" clearable disabled />
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="queryParam.phone" placeholder="请输入联系方式" clearable disabled />
            </el-form-item>
            <el-form-item label="家庭地址" prop="address">
              <el-input v-model="queryParam.address" placeholder="请输入家庭地址" clearable disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地区" prop="region">
              <el-input v-model="queryParam.region" placeholder="请输入所属地区" clearable disabled />
            </el-form-item>
            <el-form-item label="身份证号" prop="idcardNumber">
              <el-input v-model="queryParam.idcardNumber" placeholder="请输入身份证号" clearable disabled />
            </el-form-item>
            <el-form-item label="身份证附件" prop="cardFile">
              <y-show-all-file :path="queryParam.cardFile"></y-show-all-file>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 1111 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="queryParam.name" placeholder="请输入企业名称" clearable disabled />
            </el-form-item>
            <el-form-item label="企业类型" prop="corpType">
              <el-select v-model="queryParam.corpType" placeholder="请选择企业类型" clearable disabled>
                <el-option
                  v-for="item in dict.type.agriculture_corp_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="法人/负责人证件号码" prop="legalManIdcard">
              <el-input
                v-model="queryParam.legalManIdcard"
                placeholder="请输入法人/负责人证件号码"
                clearable
                disabled
              />
            </el-form-item>
            <el-form-item label="联系方式" prop="linkPhone">
              <el-input v-model="queryParam.linkPhone" placeholder="请输入联系方式" clearable disabled />
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="queryParam.address" placeholder="请输入地址" clearable disabled />
            </el-form-item>
            <el-form-item label="所属地区" prop="region">
              <el-input v-model="queryParam.region" placeholder="请输入所属地区" clearable disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="corpCode">
              <el-input v-model="queryParam.corpCode" placeholder="请输入统一社会信用代码" clearable disabled />
            </el-form-item>
            <el-form-item label="法人/负责人姓名" prop="legalMan">
              <el-input v-model="queryParam.legalMan" placeholder="请输入法人/负责人姓名" clearable disabled />
            </el-form-item>
            <el-form-item label="联络人姓名" prop="linkMan">
              <el-input v-model="queryParam.linkMan" placeholder="请输入联络人姓名" clearable disabled />
            </el-form-item>
            <el-form-item label="经营范围" prop="manageRange">
              <el-input v-model="queryParam.manageRange" placeholder="请输入经营范围" clearable disabled />
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="queryParam.state" placeholder="请选择状态" clearable disabled style="width: 100%">
                <el-option
                  v-for="item in dict.type.agriculture_state"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业执照附件" prop="file">
              <y-show-all-file :path="queryParam.file"></y-show-all-file>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="label">种植信息模块</div>
        <!--  -->
        <div class="label">农事申报记录</div>
        <el-table border v-loading="loading" :data="declareList">
          <el-table-column align="center" label="农事类型" />
          <el-table-column align="center" label="种植物" />
          <el-table-column align="center" label="农资类型" />
          <el-table-column align="center" label="农事操作时间" />
          <el-table-column align="center" label="农事照片" />
          <el-table-column align="center" label="备注" />
        </el-table>
      </el-form>
    </help-dialog>
  </div>
</template>

<script>
import plantInfoApi from '@/api/production/plan-info'
import AgricultureRegion from '@/components/AgricultureRegion/AgricultureRegion'

export default {
  dicts: ['agriculture_basic_land', 'agriculture_corp_type', 'agriculture_state', 'agriculture_manage_type'],
  components: { AgricultureRegion },
  data() {
    return {
      loading: false,
      // 种植信息
      list: [],
      query: {
        landCode: '',
        region: '',
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 经营户种植信息
      manageList: [],
      params: {
        pageNum: 1,
        pageSize: 10
      },
      manageTotal: 0,
      dialogVisible: false,
      // 经营户种植信息详情
      dialogInfo: false,
      queryParam: {},
      // 农事申报记录列表
      declareList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      plantInfoApi.plantInfoList(this.query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleReset() {
      this.query = {
        landCode: '',
        region: '',
        name: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    changeLandCode() {},
    // 经营户种植信息 弹窗关闭
    close() {},
    // 经营户种植信息详情 弹窗关闭
    closeDialog() {}
  }
}
</script>

<style scoped>
.label {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
  margin: 20px 0;
  border-left: 3px solid;
  padding-left: 5px;
  line-height: 20px;
}
</style>
